<template>
    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><b>*</b>标题</td>
                    <td><input type="text" v-model="queryinfo.Title"/></td>
                </tr>
                <tr>
                    <td>公告内容</td>
                    <td><textarea v-model="queryinfo.Desc"></textarea></td>
                </tr>
                <tr>
                    <td>公告图片</td>
                    <td><input type="file" @change="img"/>
                        <img :src="queryinfo.Photo" width="100" height="100" alt="" v-if="queryinfo.Photo!=''"/>
                    </td>
                </tr>
                <tr>
                    <td><b>*</b>状态</td>
                    <td>
                        <input type="radio" :value="1" name="state" v-model="queryinfo.State"/>显示
                        <input type="radio" :value="0" name="state" v-model="queryinfo.State"/>隐藏
                    </td>
                </tr>
                <tr>
                    <td><b>*</b>类型</td>
                    <td><select v-model="queryinfo.Leixingid">
            <option value="">请选择</option>
            <option value="服务协议">服务协议</option>
            <option value="养老协议">养老协议</option>
        </select></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="添加" class="btn btn-info" @click="add"/></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted} from 'vue'
import axios from 'axios';
import moment from 'moment';
import {useRouter,useRoute}from 'vue-router'
const router=useRouter();
const route=useRoute();

let queryinfo=reactive({
  "Title": "",
  "Desc": "",
  "Photo": "",
  "State": '',
  "Leixingid": "",
})

const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        url:'/api/Img/Fileimg',
        method:'post',
        data:f
    })
    .then(res=>{
        console.log(res);
        queryinfo.Photo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

const add=()=>{
    if(queryinfo.Title==""){
        alert('标题不能为空');
        return;
    }
    let reg1=/^[\u4e00-\u9fa5]{1,20}$/;
    if(reg1.test(queryinfo.Title)==false){
        alert('公告标题是20以内的中文汉字');
        return;
    }
    let reg2=/^[\u4e00-\u9fa5]{1,20}$/;
    if(reg2.test(queryinfo.Desc)==false){
        alert('公告标题内容是不大于50个字');
        return;
    }
    if(queryinfo.State.length==0){
        alert('状态不能为空');
        return;
    }
    if(queryinfo.Leixingid==""){
        alert('类型不能为空');
        return;
    }
    axios({
        url:'/api/Gonggao/AddGonggao',
        method:'post',
        data:queryinfo
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('添加成功');
            router.push('/gaolist');
        }
        else{
            alert('添加失败');
        }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>
b{
    color: red;
}
</style>